<template>
   <div class="dialog">
    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogLocalVisible"
    width="30%"
    @close="clearInput"
    custom-class="custom-dialog-header"
  >
    <el-form :model="formData" ref="form" label-width="120px">
      <!-- 一级菜单表单项 -->
      <div v-if="dialogType === '一级菜单'">
        <el-form-item label="一级菜单编号:">
          {{ formData.level1MenuCode }}
        </el-form-item>
        <el-form-item label="一级菜单名称:">
          <el-input v-model="formData.level1MenuName"></el-input>
        </el-form-item>
        <!-- 一级菜单内的新增二级菜单按钮 -->
        <el-button @click="openSecondLevelDialog" size="small" class="addbtn">新增二级菜单</el-button>
      </div>

      <!-- 二级菜单表单项 -->
      <div v-if="dialogType === '二级菜单'">
        <el-form-item label="一级菜单编号:">
          {{ formData.level1MenuCode }}
        </el-form-item>
        <el-form-item label="一级菜单名称:">
          <el-input v-model="formData.level1MenuName"></el-input>
        </el-form-item>
        <el-form-item label="二级菜单编号:">
          <section style="display:flex;justify-content:space-between;">
            <div> {{ formData.level2MenuCode }}</div>
            <div @click="returnToOneLevelMenu('一级菜单')" class="delete-icon">
              <i class="el-icon-delete" style="color:#5084FB"></i>
            </div>
          </section>
        </el-form-item>
        <el-form-item label="二级菜单名称:">
          <el-input v-model="formData.level2MenuName"></el-input>
        </el-form-item>
        <!-- 二级菜单内的新增三级菜单按钮 -->
        <el-button @click="openThirdLevelDialog" size="small" class="addbtn">新增三级菜单</el-button>
      </div>

      <!-- 三级菜单表单项 -->
      <div v-if="dialogType === '三级菜单'">
        <el-form-item label="一级菜单编号:">
          {{ formData.level1MenuCode }}
        </el-form-item>
        <el-form-item label="一级菜单名称:">
          <el-input v-model="formData.level1MenuName"></el-input>
        </el-form-item>
        <el-form-item label="二级菜单编号:">
          {{ formData.level2MenuCode }}
        </el-form-item>
        <el-form-item label="二级菜单名称:">
          <el-input v-model="formData.level2MenuName"></el-input>
        </el-form-item>
        <el-form-item label="三级菜单编号:">
          <section style="display:flex;justify-content:space-between;">
            <div> {{ formData.level3MenuCode }}</div>
            <div @click="returnToPreviousLevel">
              <i class="el-icon-delete" style="color:#5084FB"></i>
            </div>
          </section>
        </el-form-item>
        <el-form-item label="三级菜单名称:">
          <el-input v-model="formData.level3MenuName"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-form ref="form"  label-width="80px">
       <el-form-item label="是否启用:" class="handlerradio">
            <el-radio v-model="radio" label="1">启用</el-radio>
            <el-radio v-model="radio" label="2">禁用</el-radio>
       </el-form-item>
   
      </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogLocalVisible = false" type="primary">完成</el-button>
      <el-button @click="dialogLocalVisible = false">取消</el-button>
    </span>
  </el-dialog>
   </div>
  
</template>

<script>
export default {
  props: {
    dialogType: String,
    dialogVisible: Boolean,
    dialogTitle: String,
    formData: Object,
    
  },
  data(){
    return{
      radio:"1",
       dialogLocalVisible: this.dialogVisible,
    }
  },
   watch: {
    dialogVisible(newVal) {
      this.dialogLocalVisible = newVal;
    },
   
  },
 
  methods: {
    openSecondLevelDialog() {
      this.$emit('open-second-level-dialog');
    },
    openThirdLevelDialog() {
      this.$emit('open-third-level-dialog');
    },
    returnToOneLevelMenu() {
      this.$emit('return-to-one-level-menu');
    },
    returnToPreviousLevel() {
      this.$emit('return-to-previous-level');
    },
    clearInput() {
      
      this.$emit('clear-input');
    },
  },
};
</script>

<style  lang="scss">
.dialog{
      .custom-dialog-header .el-dialog__header {
  background-color:#5084FB; /* 自定义背景色 */
  /* 其他样式属性 */
  color: #ffffff;
}      
 .el-dialog__title,.el-dialog__headerbtn i{
      color: white;
    }
    .el-dialog__footer{
      text-align: center;
    }
   .handlerradio{
    margin-left: 43px;
   }
   .addbtn{
    margin-left: 20px;
    margin-bottom: 10px;
   }
}
 
</style>

